<!DOCTYPE html>
<html>
	<meta charset="UTF-8">
	<title>web chat</title>
	<link href="css/chat.css" rel='stylesheet' type='text/css' />
	<script src="jquery.js"></script>
</head>
<body>

<div id="chat">
    <div class="sidebar">
        <div class="m-card">
            <header>
                <img class="avatar" width="40" height="40" alt="Coffce" src="images/nango.jpg">
                <p class="name">nango</p>
            </header>
            <footer>
                <input class="search" placeholder="search room...//TODO">
            </footer>
        </div>
        <!--v-component-->
        <div class="m-list">
            <ul>
                <li class="active">
                    <img class="avatar" width="30" height="30" alt="房间" src="images/nango.jpg">
                    <p class="name">nango's room</p>
                </li>
                <!-- <li>
                    <img class="avatar" width="30" height="30" alt="webpack" src="images/3.jpg">
                    <p class="name">other</p>
                </li> -->
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="m-message">
            <ul>
                <li>
                    <p class="time"><span></span>
                    </p>
                    <div class="main">
                        <img class="avatar" width="30" height="30" src="images/nango.jpg">
                        <div class="nick">nango</div>
                        <div class="text">Hello，这是一个基于Workerman的聊天室，实现实时显示，非轮询。----请文明</div>
                    </div>
                </li>
            </ul>
        </div>
        <!--send-->
        <div class="users">
			在线用户
			<select name="client" class="client">
				
			</select>
		</div>
        <div class="m-text">
            <textarea placeholder="按 Ctrl + Enter 发送" class="input"></textarea>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

	//连接
	ws = new WebSocket("ws://198.210.10.167:2345");
	var name = sessionStorage.name;

	function connect(){
		if(name == 'undefined' || name == 'null' || name == ''){
			inputName();
		}

		var content = '{"type":"login","name":"'+ name +'","to_client":"all"}';
		ws.onopen = function() {
		    ws.send(content);
		};
		
	}

	//输入名称
	function inputName(){
		var tempName = 'nango'+Math.floor(Math.random()*10000);
		name = prompt('输入你的名字：', tempName);

		if(name != 'undefined' && name != 'null' && name != ''){
			sessionStorage.name=name;
		}else{
			alert('请输入你的昵称！');
			inputName();
		}
	}
	//发送消息
	$(".input").keypress(function(e) {
		//firefox enter code=13 ; chrome = 10		
		if (e.ctrlKey && (e.which == 13 || e.which == 10)){
			var text = $(".input").val();
			var to_client = $(".client option:selected").val();
			if(text == ''){
				alert('不能发送空内容！');
				return;
			}

			type = to_client == 'all'?"say":"prisay";	
			var content = '{"type":"'+ type +'","content":"'+ text +'","name":"'+ name +'","to_client":"'+ to_client +'"}';
			console.log(content);
			ws.send(content);
			$(".input").val('').focus();
		}
	});
	//服务端消息返回
	ws.onmessage = function(e) {
		var data = JSON.parse(e.data);
		var str = '<li>'
                 +    '<p class="time"><span>'+ data.time +'</span>'
                 +   '</p>';
                 if(data.nick != name){
                 	str +=   '<div class="main">';
                 }else{
                 	str +=   '<div class="main self">';
                 }
                 
             str +=       '<img class="avatar" width="30" height="30" src="http://lorempixel.com/30/30/">'
                 +       '<div class="nick">'+ data.nick +'</div>'
                 +       '<div class="text">'+ data.content +'</div>'
                 +   '</div>'
                 +'</li>';
		
		if(data.type == 'login'){
			//已连接服务的客户端对象
			var client_list = {};
			client_list = data.clients;
			//遍历所有已连接客户端
			html = '<option value="all" selected="selected">所有人</option>';
			for (var key in client_list) {
				html += '<option value="'+ key +'">'+ client_list[key].name +'</option>';
			}
			$('.client').html(html);
		}
	    $(".m-message ul").append(str);
	    //滚动到底部
	    $(".m-message").scrollTop($('.m-message ul')[0].scrollHeight);
	};	

	$(document).ready(function(){
		if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
			alert('暂不支持移动端访问，请移步PC端！');
			return false;
		}
		connect();
	});
	</script>
<!-- <script src="images/vue.js.下载"></script>
<script src="images/main.js.下载"></script> -->
</html>